<script setup lang="ts">
import { useConfigTableStore } from '@/stores/config/configTableStore';
import { computed } from 'vue';
import { ViewHelper } from '@/utils/viewHelper';

const props = defineProps({
    tableId: {
        type: Number,
        required: true
    },
    rowId: {
        type: Number,
        required: true
    }
});

const tableStore = useConfigTableStore();

const currentTable = computed(() => tableStore.getTable(props.tableId));
const currentRow = computed(() => tableStore.getTableRow(props.tableId, props.rowId));
</script>

<template>
    <div class="row-inspector">
        <div v-if="!currentTable" class="error">表格不存在（ID：{{ tableId }}）</div>
        <div v-else-if="!currentRow" class="error">行不存在（ID：{{ rowId }}）</div>
        
        <el-descriptions v-else border :column="1">
            <el-descriptions-item 
                v-for="(header, index) in currentTable.tableHeader"
                :key="index"
                :label="header.label">
                {{ ViewHelper.getTableElementText(header, currentRow.values[index]) }}
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<style scoped>
.row-inspector {
    padding: 15px;
}

.error {
    color: #F56C6C;
    padding: 20px;
    text-align: center;
}

.el-descriptions {
    margin-top: 15px;
}
</style>